<@layout.extends name="layout/template.ftl">
	<@layout.put block="title">菜单管理</@layout.put>

	<@layout.put block="contents">

<!-- content starts -->
<div>
    <ul class="breadcrumb">
        <li>
            <a href="#">后台管理</a>
        </li>
        <li>
            <a href="#">系统管理</a>
        </li>
        <li>
            <a href="${request.contextPath}/sys/menu">菜单管理</a>
        </li>
    </ul>
</div>

<div class="row">
	<div class="box col-md-12">
		<div class="box-inner">
			<div class="box-header well" data-original-title="">
				<h2>
					<i class="glyphicon glyphicon-user"></i>
					菜单列表
				</h2>
			</div>
			<div class="box-content">
				<table id="menuListTable" class="table table-striped table-bordered responsive treetable">
					<thead>
		                <tr>
		                    <th>名称</th>
		                    <th>链接</th>
		                    <th>排序</th>
		                    <th>可见</th>
		                    <th>图标</th>
		                    <th>权限标识</th>
		                    <th>操作</th>
		                </tr>
					</thead>
				</table>
			</div>
		</div>
	</div>
</div>


<div class="modal fade" id="menuInfoModal" tabindex="-1" role="dialog" aria-labelledby="menuInfoModalLabel">

    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">×</button>
                <h4>菜单信息</h4>
            </div>
            <div class="modal-body">
            	<div class="box-content">
	                <form class="form-horizontal" id="menuEditForm">
	                	<input type="hidden" id="parentId" name="parentId">
	                	<input type="hidden" id="id" name="id">
	                	<div class="form-group">
					    	<label class="col-sm-2 control-label" for="parentName">上级菜单</label>
					    	<div class="col-md-4" >
					    		<input type="text" class="form-control" id="parentName" name="parentName" readonly>
					    		<span class="help-block" id="parentIdMsg"></span>
					    	</div>
					    	<label class="col-sm-2 control-label" for="name">名称</label>
					    	<div class="col-md-4">
					    		<input type="text" class="form-control" id="name" name="name" autocomplete="off">
					    		<span class="help-block" id="nameMsg"></span>
					    	</div>
					    </div>
	                	
	                	<div class="form-group">
					    	<label class="col-sm-2 control-label" for="href">链接</label>
					    	<div class="col-md-4">
					    		<input type="text" class="form-control" id="href" name="href" autocomplete="off">
					    		<span class="help-block" id="hrefMsg"></span>
					    	</div>
					    	<label class="col-sm-2 control-label" for="sort">排序</label>
					    	<div class="col-md-4">
					    		<input type="text" class="form-control" id="sort" name="sort" autocomplete="off">
					    		<span class="help-block" id="sortMsg"></span>
					    	</div>
					    </div>
					    
					    <div class="form-group">
					    	<label class="col-sm-2 control-label" for="target">链接目标</label>
					    	<div class="col-md-4">
					    		<input type="text" class="form-control" id="target" name="target" autocomplete="off">
					    		<span class="help-block" id="hrefMsg"></span>
					    	</div>
					    	<label class="col-sm-2 control-label" for="icon">图标</label>
					    	<div class="col-md-4">
					    		<input type="text" class="form-control" id="icon" name="icon" autocomplete="off">
					    		<span class="help-block" id="iconMsg"></span>
					    	</div>
					    </div>
					    
					    <div class="form-group">
					    	<label class="col-sm-2 control-label">是否显示</label>
					    	<div class="col-md-4">
					    		<label class="radio-inline">
									<input type="radio" name="showFlag" value="1" checked="true">是
								</label>
					    		<label class="radio-inline">
									<input type="radio" name="showFlag" value="0">否
								</label>
					    		
					    		<span class="help-block" id="showFlagMsg"></span>
					    	</div>
					    	<label class="col-sm-2 control-label" for="permission">权限标识</label>
					    	<div class="col-md-4">
					    		<input type="text" class="form-control" id="permission" name="permission" autocomplete="off">
					    		<span class="help-block" id="permissionMsg"></span>
					    	</div>
					    </div>
	                	
	                </form>
	            </div>
            </div>
            <div class="modal-footer">
                <a href="#" class="btn btn-default" data-dismiss="modal">关闭</a>
                <a href="#" class="btn btn-primary" id="saveMenuButton">保存</a>
            </div>
        </div>
    </div>
</div>


<script type="text/javascript" charset="utf-8">
$(document).ready(function() {

	var table = $('#menuListTable').DataTable({
		"columns": [
			{ "data": "name" },
			{ "data": "href" },
			{ "data": "sort" },
			{ "data": "showFlag" },
			{ "data": "icon" },
			{ "data": "permission" },
			{ "data": "id" }
      	],
      	"columnDefs": [{
      		"render": function ( data, type, row ) {
      			if (row.parentId == 0) {
      				return '';
      			} else {
      				var optHtml = '';
	      			optHtml += '<button type="button" class="btn btn-info" onclick="addChildMenu(' + row.id + ',\'' + row.name + '\')">新增下级菜单</button>&nbsp;&nbsp;&nbsp;';
	      			optHtml = optHtml + '<button type="button" class="btn btn-info" onclick="editMenu(' + row.id + ')">编辑</button>&nbsp;&nbsp;&nbsp;';
	      			optHtml = optHtml + '<button type="button" class="btn btn-info" onclick="deleteMenu(' + row.id + ',' + row.parentId + ')">删除</button>';
	      			return optHtml;
      			}
			},
			"targets": 6
      	},{
      		"render": function ( data, type, row ) {
      			if (data == 1) {
      				return '是';
      			} else if (data == 0){
      				return '否'
      			}
			},
			"targets": 3
      	}],
      	ajax: '${request.contextPath}/sys/menu/select-by-parent-id/0',
		treetable: {
			parentIdAttr:'parentId',
			expandable: true,
			expandAll: true,
			onNodeExpand : function() {
				var node = this;
				$.getJSON('${request.contextPath}/sys/menu/select-by-parent-id/' + node.id).done(function(json){
				    table.treeTable.addChildren(node, json.data);
				}).fail(function(e) {
				    console.log("error", e);
				})
			}
		},
		"autoWidth": false,
		"ordering": false,
		"paging": false,
		"info": false,
		"searching": false
	} );
	
} );


$("#saveMenuButton").click(function () {
	$('#saveMenuButton').attr('disabled',"true");
	var options = {
        url: '${request.contextPath}/sys/menu/save-menu',
        type: 'post',
        dataType: 'json',
        data: $("#menuEditForm").serialize(),
        success: function (data) {
        	$("#menuEditForm").showErrorMsg(data);
        	$('#saveMenuButton').removeAttr("disabled");
        	if (data.success) {
        		$('#menuInfoModal').modal('hide');
        		var parentId = $("#menuEditForm #parentId").val();
				$('#menuListTable').treetable("collapseNode", parentId);
				$('#menuListTable').treetable("expandNode", parentId);
        	}
        }
    };
    $.ajax(options);
    
});

//点击新增
function addChildMenu(parentId, parentName) {
	$("#menuEditForm").clearErrorMsg();
	$("#menuEditForm")[0].reset();
	$("#menuEditForm").find('[name=parentId]').val(parentId);
	$("#menuEditForm").find('[name=parentName]').val(parentName);
	$('#menuInfoModal').modal('show');
}

//点击编辑
function editMenu(menuId) {
	$("#menuEditForm").clearErrorMsg();
	$("#menuEditForm")[0].reset();
	$.getJSON("${request.contextPath}/sys/menu/select-by-id/" + menuId,function(result){
	    $('#menuEditForm').autofill(result.data);
	    
	    $.getJSON("${request.contextPath}/sys/menu/select-by-id/" + result.data.parentId, function(result){
	    	$("#menuEditForm").find('[name=parentName]').val(result.data.name);
  		});
  	});
	$('#menuInfoModal').modal('show');
}

//点击删除
function deleteMenu(menuId, parentId) {
	$.confirm({
		title:'',
		confirmButtonClass: 'btn-warning',
		cancelButtonClass: 'btn-success',
		confirm: function () {
			var options = {
		        url: '${request.contextPath}/sys/menu/delete-by-id/' + menuId,
		        type: 'delete',
		        dataType: 'json',
		        success: function (data) {
		        	$("#menuEditForm").showErrorMsg(data);
		        	if (data.success) {
						$('#menuListTable').treetable("collapseNode", parentId);
						$('#menuListTable').treetable("expandNode", parentId);
		        	}
		        }
		    };
		    $.ajax(options);
		}
	});
}
</script>

	</@layout.put>
</@layout.extends>


